<script setup>
import { computed, defineProps, onMounted, ref, watch, defineEmits } from 'vue'
const props = defineProps({
  dataprop: {
    type: Array,
    default: () => []
  },
  datalength: {
    type: Number
  },
  guanqiano: {
    type: Number
  }
})
const emit = defineEmits(['close-guanqia', 'new-guanqia', 're-guanqia', 'all-guanqia'])
// 定义得分
const score = ref(0)
// 定义过关所需的得分
const passscore = ref(80)
// 定义答错的题数
const errors = ref(0)
// 获取音效
const successAudio = ref(null)
const faileAudio = ref(null)
// 获取imput
const inputA = ref(null)
const inputB = ref(null)
const inputC = ref(null)
const inputD = ref(null)
// 定义单选框
const selectOption = ref('')
// 第几道题
const tino = ref(0)
// 题的内容
const tiContent = computed(() => {
  return props.dataprop[tino.value]
})
// 题目对错
const isRight = ref(false)
// 显示对号
const showRight = ref(false)
// 修改选中答案的样式
function handleRadioChange(selected) {
  selectOption.value = selected
}
// 显示正确或错误
const showRW = ref(false)
const answerText = ref('')
const textStyle = ref('')
// 渲染数据到页面
function checkDaan() {
  showRight.value = true
  if (selectOption.value == props.dataprop[tino.value][6]) {
    isRight.value = true
    score.value += 10
    successAudio.value.play()
    answerText.value = '正确'
    textStyle.value = 'text_right'
  } else {
    isRight.value = false
    errors.value += 1
    faileAudio.value.play()
    answerText.value = '错误'
    textStyle.value = 'text_wrong'
  }
  showRW.value = true
  setTimeout(() => {
    showRight.value = false
    selectOption.value = ''
    // console.log(selectOption.value)
    if (inputA.value) inputA.value.checked = false
    if (inputB.value) inputB.value.checked = false
    if (inputC.value) inputC.value.checked = false
    if (inputD.value) inputD.value.checked = false
    hideIcon()
    answerText.value = ''
    showRW.value = false
    textStyle.value = ''
    tino.value++
  }, 2000)
}
function hideIcon() {
  isRight.value = false
}
function closeGuanqia() {
  emit('close-guanqia')
}
function newGuanqia() {
  emit('new-guanqia', score.value)
}
function reGuanqia() {
  emit('re-guanqia', score.value)
}
function successAll() {
  emit('all-guanqia', score.value)
}
onMounted(() => {
  // successAudio.value.play()
})
watch(score, () => {
  console.log('score改变了', score.value)
  if (score.value >= passscore.value) {
    closeGuanqia()
    if (props.guanqiano < 4) {
      newGuanqia()
    } else {
      successAll()
    }
  }
})
watch(tino, () => {
  if (errors.value > 2) {
    console.log('未通过', tino.value)
    closeGuanqia()
    reGuanqia()
  }
})
</script>

<template>
  <audio ref="successAudio">
    <source src="../assets/audios/answer_right.wav" type="audio/wav" />
  </audio>
  <audio ref="faileAudio">
    <source src="../assets/audios/answer_error.wav" type="audio/wav" />
  </audio>
  <div class="guanqia_container">
    <div id="bg" class="content"></div>
    <div id="fore" class="content">
      <div class="neirong">
        <div class="ti_title">{{ tino + 1 }}. {{ tiContent[1] }}</div>
        <div class="option" :class="selectOption == 'A' ? 'selected' : ''">
          <label for="inputA">A. {{ tiContent[2] }}</label>
          <input
            id="inputA"
            ref="inputA"
            type="radio"
            name="xuanxiang"
            value="A"
            @change="(handleRadioChange('A'), hideIcon())"
          />
          <img v-if="props.dataprop[tino][6] == 'A' && showRight" src="../assets/对号.png" alt="" />
        </div>
        <div class="option" :class="selectOption == 'B' ? 'selected' : ''">
          <label for="inputB">B. {{ tiContent[3] }}</label>
          <input
            id="inputB"
            ref="inputB"
            type="radio"
            name="xuanxiang"
            value="B"
            @change="(handleRadioChange('B'), hideIcon())"
          />
          <img v-if="props.dataprop[tino][6] == 'B' && showRight" src="../assets/对号.png" alt="" />
        </div>
        <div
          v-if="tiContent[4] != null"
          class="option"
          :class="selectOption == 'C' ? 'selected' : ''"
        >
          <label for="inputC">C. {{ tiContent[4] }}</label>
          <input
            id="inputC"
            ref="inputC"
            type="radio"
            name="xuanxiang"
            value="C"
            @change="(handleRadioChange('C'), hideIcon())"
          />
          <img v-if="props.dataprop[tino][6] == 'C' && showRight" src="../assets/对号.png" alt="" />
        </div>
        <div
          v-if="tiContent[5] != null"
          class="option"
          :class="selectOption == 'D' ? 'selected' : ''"
        >
          <label for="inputD">D. {{ tiContent[5] }}</label>
          <input
            id="inputD"
            ref="inputD"
            type="radio"
            name="xuanxiang"
            value="D"
            @change="(handleRadioChange('D'), hideIcon())"
          />
          <img v-if="props.dataprop[tino][6] == 'D' && showRight" src="../assets/对号.png" alt="" />
        </div>
      </div>
      <div class="button" @click="checkDaan()">提交答案</div>
    </div>
    <div v-if="showRW" id="rwtext" :class="textStyle">{{ answerText }}</div>
    <!-- <div class="close" @click="closeGuanqia()"></div> -->
  </div>
</template>
<style lang="scss" scoped>
.guanqia_container {
  width: 100%;
  height: 100%;
  background-color: #0482da;
  position: relative;
  z-index: 1;
  .content {
    width: 80%;
    height: 70%;
    border-radius: 1.5vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  #bg {
    background-color: #ffffff55;
    transform: translate(-50%, -50%) scale(1.025, 0.95) rotate(-5deg);
    z-index: 2;
  }
  #fore {
    background-color: #ffffffbb;
    z-index: 3;
    .neirong {
      width: 80%;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, 0);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      border: 0px solid red;
      .ti_title {
        color: #000;
        font-size: 2rem;
        margin-top: 10vh;
        margin-bottom: 3vh;
        z-index: 1;
      }
      .selected {
        background-color: #fff;
        label {
          color: #3478ff;
        }
      }
      .option {
        width: 100%;
        height: 6vh;
        box-sizing: content-box;
        color: #889ab8;
        font-size: 2rem;
        margin-left: 2rem;
        margin-bottom: 4vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 1;
        label {
          flex: 1;
        }
        input {
          appearance: none;
        }
        img {
          width: 5vh;
          height: 5vh;
        }
      }
    }
    .button {
      width: 24vh;
      height: 4vh;
      font-size: 1.3rem;
      background-color: #3478ff;
      border-radius: 2rem;
      position: absolute;
      left: 50%;
      bottom: 1vh;
      transform: translate(-50%, 0);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  #rwtext {
    width: 15vh;
    height: 8vh;
    line-height: 8vh;
    font-size: 3rem;
    position: absolute;
    right: 25vh;
    bottom: 22vh;
    transform: rotate(-6deg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
  }
  .text_right {
    color: green;
    border: 3px solid green;
  }
  .text_wrong {
    color: red;
    border: 3px solid red;
  }
  .close {
    width: 5vh;
    height: 5vh;
    background-color: red;
    position: absolute;
    right: 1vh;
    top: 1vh;
    z-index: 9;
  }
}
</style>
